<template>
  <header>
    <div>
      <div style="float: left;">
        <span>欢迎您！{{ loginInfo.userName?'采购商家':'供货商' }}</span>
        <span @click="logout">{{ loginInfo.userName?loginInfo.userName:loginInfo.adminName }} 退出</span>
      </div>
      <div style="margin-left: 82%;">
        <span @click="home">首页</span>
        <span
          style="margin:0 10px;"
          @click="order">进入后台</span>
        <span @click="cart"><i class="el-icon-shopping-cart-2"/>订购车</span>
      </div>
    </div>
    <div class="contant">
      <div>
        <img
          src="@/assets/images//载富logo2.png"
          alt=""
          width="170px"
          style="float:left;">
        <div/>
        <div class="inline">
          <el-input
            v-model="keyword"
            placeholder="请输入你想要的商品"/>
          <el-button
            type="warning"
            icon="el-icon-search"
            @click="getgoods"/>
        </div>
      </div>
      <br>
      <div class="top">
        <span class="sort"><i class="el-icon-s-order"/>全部分类</span>
        <span
          class="title"
          @click="goodslist">精品馆</span>
        <div/>
      </div>
    </div>

  </header>
</template>

<script>

export default {
    data: () => ({
        loginInfo: {},
        keyword: "",
    }),
    mounted() {
        this.getLoginInfo();
    },
    methods: {
        getLoginInfo() {
            this.loginInfo = {
                userName: sessionStorage.getItem("userName"),
                adminName: sessionStorage.getItem("adminName"),
            };
        },
        logout() {
            // this.$store.commit("SET_LOGIN_STATUS", {
            //     isLogin: false,
            // });
            sessionStorage.removeItem("token");
            console.log("qqq");
            this.$router.push("/login");
        },
        home() {
            this.$router.push("/homePage");
        },
        cart() {
            this.$router.push("/shoppingCart");
        },
        order() {
            this.$router.push("/orderList");
        },
        goodslist() {
            this.$router.push("/goodslist");
        },
        getgoods() {
            this.$router.push({path: "/goodslist", query: {keyword: this.keyword}});
        },
    },
};
</script>

<style scoped>
.flex-border {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.inline {
  display: flex;
  align-content: flex-start;
  width: 500px;
  margin-left: 300px;
  padding-top: 10px;
}
.top {
  border-bottom: 1px solid #E6A23C;
  width: 131%;
  margin-left:-18%;
}
span {
  font-size: 12px;
}
.sort {
  display: inline-block;
  background-color: #E6A23C;
  font-size: 16px;
  color: #fff;
  margin-left: 14%;
  padding: 10px 50px;
}
.title {
  font-size: 18px;
  font-weight: bolder;
  padding-left: 50px;
}
</style>
